<template>
  <el-form ref="formRef">
    <el-upload
      ref="uploadRef"
      drag
      multiple
      :on-change="handleFileChange"
      :auto-upload="false"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>

    <el-button type="danger" @click="uploadFile">提交</el-button>
  </el-form>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formData: {}, // 表单数据
      file: null, // 上传的文件
    };
  },
  methods: {
    handleFileChange(file, fileList) {
      this.file = file.raw;
    },
    async uploadFile() {
      const formData = new FormData();
      if (this.file) {
        formData.append("file", this.file);
      }
      try {
        const response = await axios.post(
          "/chushi/viewsets/",
          formData,
          {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
        );
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>
